<template>
	<view>
		<u-navbar title="新增管理员">
		</u-navbar>
		<u-sticky>
			<view class="bg-white u-p-x-30 u-p-y-14 solid-bottom">
				<u-search v-model="name" placeholder="搜索群用户名" :show-action="false"></u-search>
			</view>
		</u-sticky>
		<view class="u-flex u-p-x-30 u-p-y-20 bg-white u-border-bottom"
			v-for="(user,index) in list" 
			:key="index"
			@tap="pickUser(user)"
		>
			<u-avatar :src="user.avatar" mode="square"></u-avatar>
			<text class="u-flex-1 u-m-l-20 u-font-34">{{user.userName}}</text>
		</view>
	</view>
</template>

<script>
	import {state} from "../bus.js"
	import {Enum as authEnum,hasAuth} from "../authUtil.js"
	import {fetchGroupMember} from "@/api/addr.js"
	export default {
		data() {
			return {
				id:'',
				name:'',
				list:[],
				pageNo:1,
				pageSize:20,
				nomore:false,
				loading:false,
				eventChannel:null
			};
		},
		watch:{
			name(val){
				this.$u.debounce(this.reset, 500)
			}
		},
		onLoad({id}) {
			this.id = id
			this.reset()
			this.eventChannel = this.getOpenerEventChannel();
		},
		methods:{
			pickUser(item){
				this.eventChannel.emit('confirm', item);
				uni.navigateBack()
			},
			async reset(){
				this.list = []
				this.pageNo = 1
				this.nomore = false
				await this.more()
			},
			async more(){
				if(this.loading){
					throw new Error('正在请求中')
				}
				try{
					this.loading = true
					if(this.nomore){
						return []
					}
					const list = await fetchGroupMember({
						id:this.id,
						name:this.name,
						pageNo:this.pageNo,
						pageSize:this.pageSize,
						vest:'成员'
					})
					if(!list||list.length<this.pageSize){
						this.nomore = true
					}else{
						this.pageNo++
					}
					this.list.push(...list.map((item)=>({...item,isMute:!hasAuth(item.rule,authEnum.send)})))
					return list
				}finally{
					this.loading = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.checkbox{
		width: 40rpx;
		height: 40rpx;
		background-color: $u-type-info-light;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		transition: all 0.2s ease-out;
		&::after{
			font-family: "cuIcon";
			content: "\e645";
			color: #FFFFFF;
			opacity: 0;
			transition: all 0.2s ease-out;
		}
		&.checked{
			background-color: $u-type-primary;
			&::after{
				opacity: 1;
			}
		}
		&.disable{
			background-color: #aaaaaa;
			pointer-events: none;
			&::after{
				opacity: 1;
			}
		}
	}
</style>
